import React, { forwardRef } from 'react';
import './index.scss';
import TopNavigation from '../top-navigation';

export interface TopBackgroundProps {
  /**
   * 自定义类名
   */
  className?: string;
  /**
   * 自定义样式
   */
  style?: React.CSSProperties;
  /**
   * 子组件
   */
  children?: React.ReactNode;
  /**
   * 宽度
   */
  width?: number | string;
  /**
   * 高度
   */
  height?: number | string;
  /**
   * 不透明度
   */
  opacity?: number;
  /**
   * 背景图片路径
   */
  backgroundImage?: string;
  /**
   * 是否启用响应式
   */
  responsive?: boolean;
  /**
   * 设计模式
   */
  __designMode?: string;
  /**
   * 组件ID
   */
  componentId?: string;
  /**
   * 组件名称
   */
  _componentName?: string;
  /**
   * 其他属性
   */
  [key: string]: any;
}

const TopBackground = forwardRef<HTMLDivElement, TopBackgroundProps>(({
  className = '',
  style = {},
  children,
  width = 3952,
  height = 186,
  opacity = 1,
  backgroundImage = 'http://localhost:8085/static/images/shouye/顶部背景.png',
  responsive = true,
  __designMode,
  componentId,
  _componentName,
  ...otherProps
}, ref) => {

  const customStyle: React.CSSProperties = {
    opacity,
    backgroundImage: `url(${backgroundImage})`,
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',
    ...style,
  };

  if (width) {
    customStyle.width = typeof width === 'number' ? `${width}px` : width;
  }

  if (height) {
    customStyle.height = typeof height === 'number' ? `${height}px` : height;
  }

  const combinedClassName = [
    'hzdz-top-background',
    responsive ? 'responsive' : '',
    className
  ].filter(Boolean).join(' ');

  return (
    <div
      ref={ref}
      className={combinedClassName}
      style={customStyle}
      data-component-id={componentId}
      data-component-name={_componentName}
      {...otherProps}
    >
      <TopNavigation
        items={[
          { key: 'home', title: '首页', href: '/' },
          { key: 'departure', title: '出行服务', href: '/departure' },
          { key: 'weather', title: '气象防灾', href: '/weather' },
          { key: 'safety', title: '消防安全', href: '/safety' },
          { key: 'emergency', title: '应急管理', href: '/emergency' },
          { key: 'enforcement', title: '综合执法', href: '/enforcement' }
        ]}
        defaultActiveKey="home"
        alignment="center"
        height={60}
        backgroundColor="transparent"
        activeColor="#00D4FF"
        textColor="rgba(255, 255, 255, 0.9)"
        fontSize={16}
        fontWeight={500}
        style={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          width: '80%',
          zIndex: 10
        }}
      />
      {children}
    </div>
  );
});

TopBackground.displayName = 'TopBackground';

export default TopBackground;